<template>
    <div>
        <div class="list">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <ul>
                    <li v-for="(item,index) in filterlist" :key="index">
                        <div class="img">
                            <img :src="`https://www.160dyf.com/${item.goodsImg}`" alt="">
                        </div>
                        <h2> <i>Rx</i> {{item.goodsName}}</h2>
                        <p>￥{{item.goodsPrice}}<em>已售{{item.goodsPayNum}}</em></p>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
</template>

<script>
    import request from '../utils/request'
    
    export default {
        props: {
            obj: {
                type: Object,
            },
        },
        data() {
            return {
                list: [],
                newlist:[],
                scor:"https://www.160dyf.com/",
                loading: false,
                finished: false,
                p:1   //分页页码
            }
        },
        updated () {
            console.log(this.obj.idx);
            this.newlist = this.list
        },
        methods: {
            fetchData() {  //数据请求的方法
                let url = `/hehe/Mobile/MobileApi/goodsTypeList.html?typeId=${this.obj.num}
                &is_new=1&new_level=3&tagType=1&sortType=&page=${this.p}&pageSize=10&vue_nologin=1`
                request.get(url).then(res=>{
                    console.log(res);
                    let {list} = res.data.data
                    if(list.length){
                        this.list = [
                            ...this.list, //旧数据
                            ...list  //新数据
                        ]
                        this.p++
                    }else{
                      this.finished = true  //没有更多数据了
                    }
                    this.loading = false;
                })
            },
            onLoad(){
              this.fetchData()
            },
            compare(property){  //倒序的方法
                return function(a,b){
                    let value1 = a[property];
                    let value2 = b[property];
                    return value2 - value1;
                }
            },
            comparer(property){  //正序的方法
                return function(a,b){
                    let value1 = a[property];
                    let value2 = b[property];
                    return value1 - value2;
                }
            }
        },
        computed: {
            filterlist() {
                let {idx} = this.obj
                let {newlist,compare,comparer,list} = this
                switch (idx){
                    case 1:
                        return newlist.sort((compare("goodsPayNum")))
                    case 2:
                        return newlist.filter(item=>{
                            return item.goodsPayNum >10&&item.goodsPayNum<600
                        })
                    case 3:
                        return newlist.sort((comparer("goodsPrice")))
                    default:
                        return this.list
                }
            }
        },
    }
</script>

<style src="../assets/css/goodlist.css" scoped></style>

<style scoped>
.list em{
    color: #999;
    font-size: 12px;
    text-decoration: none !important;
    margin-left: 10px;
}
.list i{ 
    padding: 0 10px;
    background: #f22e00;
    border-radius: 50%;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-family: PingFangSC-Regular;
}
</style>